<template>
  <div>
    <img :src="v.img" alt="" width="100%">
    <h3>{{ v.title }}</h3>
    <p>{{ v.desc }}</p>

    <van-button @click="addToCar">加入购物车</van-button>
  </div>
</template>


<script setup>
import { useRoute } from 'vue-router'
// 获取查询参数
const route = useRoute();

const v = route.query;
console.log(v)

const addToCar = () => {
  const car = JSON.parse(localStorage.getItem('car') || '[]')
  // 判断是否已经存在该商品 
  const item = car.find(item => item.id === v.id)  
  if(item) {
    item.count++
  } else {
    car.push({ ...v, count: 1 })
  }

 
  localStorage.setItem('car', JSON.stringify(car))
  alert('加入购物车成功')
}
</script>